<template>
<div>
  <!-- 数据单向绑定  :data表格数据 -->
  <el-table :data="dataList" border>
    <!-- prop属性  与此处数据的属性一致 -->
    <el-table-column prop="name"   label="姓名" width="120" ></el-table-column>
    <el-table-column prop="loginName"   label="昵称" width="120" ></el-table-column>
    <el-table-column prop="password"   label="密码" width="120" ></el-table-column>
    <el-table-column prop="sex" label="性别" width="85" ></el-table-column>
    <el-table-column prop="age"    label="年龄" width="85" ></el-table-column>
    <el-table-column prop="phonenumber" label="电话" width="200" ></el-table-column>
    <el-table-column prop="entryDay" label="入职日期" width="200" ></el-table-column>
    <el-table-column prop="workarea" label="地址" width="200" ></el-table-column>
    <el-table-column label="操作" width="100">
        <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-edit"   circle @click="handleUpdate(scope.row)" ></el-button>
        </template>
    </el-table-column>

  </el-table>

  <div class="add-form">
    <el-dialog title="信息更改" :visible.sync="dialogFormVisibleEdit">
      <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称" prop="loginName">
              <el-input v-model="formData.loginName"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model="formData.password">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-input v-model="formData.sex">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="formData.age">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phonenumber">
              <el-input v-model="formData.phonenumber">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="入职时间" prop="entryDay">
              <el-input v-model="formData.entryDay" readonly="readonly">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作地区" prop="workarea">
              <el-input v-model="formData.workarea">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取消</el-button>
        <el-button type="primary" @click="handleEdit()">确定</el-button>
      </div>
    </el-dialog>

  </div>

</div>
</template>

<script>
export default {
  name: "EmployeeInfoView",
  data() {
    return {
      dataList: [],
      formData:{},
      loginName:this.$store.getters.getUser.loginName,
      dialogFormVisibleEdit: false,
      rules: {//校验规则
        loginName: [{ required: true, message: '管理员昵称为必填项', trigger: 'blur' }],
        password: [{ required: true, message: '管理员密码为必填项', trigger: 'blur' }],

      }
    }
  },
  //钩子函数，VUE对象初始化完成后自动执行
  created(){
    this.InfoList()
  },
  methods: {
    InfoList() {
      //console.log(loginName);
      console.log(this.$store.getters.getUser.login_name)
      axios.get(`http://localhost:8099/driver/meInfo/${this.$store.getters.getUser.login_name}`).then(res => {
        this.dataList.push(res.data.data)
        console.log(res.data)
      }).catch(error => {
        console.log(error)
      })
    },
    handleUpdate(row){
      axios.get(`http://localhost:8099/driver/editme/${row.id}`).then(response=> {
        console.log(response.data)
        if (response.data.code==200){
          this.dialogFormVisibleEdit=true
          this.formData=response.data.data
        }else {
          this.$message.error(response.data.code)
        }
      })
    },
    //编辑完成
    handleEdit(){
      //校验表单
      this.$refs["dataEditForm"].validate((valid)=>{
        if (valid){
          this.dialogFormVisibleEdit=false
          axios.post('http://localhost:8099/driver/update',this.formData).then(response=>{
            if (response.data.code==200){
              this.$message.success(response.data.message)
            }else {
              this.$message.error(response.data.code)
            }
          })
        }else {
          this.$message.error('表单校验失败')
          return false
        }
      })
      location.reload()
    },
  }
}
</script>

<style scoped>

</style>